<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link type="text/css" rel="stylesheet" href="layui/css/layui.css"/>
		<script type="text/javascript" src="layui/layui.js"></script>
	</head>
	<body>
		<form id="updateProduct" class="layui-form" action="">
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red;">*</span>id:</label>
				<div class="layui-input-inline">
					<input  type="text" id="id" placeholder="请输入id"
						lay-verify = "required" readonly="readonly" name="id" class="layui-input layui-bg-gray">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">
					<span style="color: red;">*</span>产品名:</label>
				<div class="layui-input-inline">
					<input  type="text" id="name" name="name" placeholder="请输入产品名"
						lay-verify = "required" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">
					<span style="color: red;">*</span>产品图品:</label>
				<div class="layui-input-inline">
					<button type="button" class="layui-btn" id="uploadProduct">
                        <i class="layui-icon">&#xe67c;</i>上传图片
                    </button>
	                <img id="imgFace" style="width: 120px" src="" /><br />
                    <input type="hidden" name="picture" id="picture" value="" class="layui-input">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">
					<span style="color: red;">*</span>品牌:</label>
				<div class="layui-input-inline">
					<input  type="text" id="brand" name="brand" placeholder="请输入品牌"
						lay-verify = "required" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">
					<span style="color: red;">*</span>是否组装:</label>
				<div class="layui-input-inline">
					<select name="packages" id="packages">
					    <option value="YES">组装</option>
					    <option value="NO">不组装</option>
					    
					</select>
				</div>
			</div><div class="layui-form-item">
				<label class="layui-form-label">
					<span style="color: red;">*</span>是否可定制:</label>
				<div class="layui-input-inline">
					<select name="custom" id="custom">
					    <option value="yes">可以</option>
					    <option value="no">不可以</option>
					    
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">
					<span style="color: red;">*</span>型号:</label>
				<div class="layui-input-inline">
					<input  type="text" id="model" name="model" placeholder="请输入型号"
						lay-verify = "required" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">
					<span style="color: red;">*</span>颜色分类:</label>
				<div class="layui-input-inline">
					<input  type="text" id="colourClass" name="colourClass" placeholder="请输入颜色分类"
						lay-verify = "required" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">
					<span style="color: red;">*</span>设计元素:</label>
				<div class="layui-input-inline">
					<input  type="text" id="designElement" name="designElement" placeholder="请输入设计元素"
						lay-verify = "required" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">
					<span style="color: red;">*</span>风格:</label>
				<div class="layui-input-inline">
					<input  type="text" id="style" name="style" placeholder="请输入风格"
						lay-verify = "required" class="layui-input">
				</div>
			</div><div class="layui-form-item">
				<label class="layui-form-label">
					<span style="color: red;">*</span>款式定位:</label>
				<div class="layui-input-inline">
					<input  type="text" id="location" name="location" placeholder="请输入款式定位"
						lay-verify = "required" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">
					<span style="color: red;">*</span>材质:</label>
				<div class="layui-input-inline">
					<input  type="text" id="texture" name="texture" placeholder="请输入材质"
						lay-verify = "required" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">
					<span style="color: red;">*</span>售价:</label>
				<div class="layui-input-inline">
					<input  type="text" id="sellingPrice" name="sellingPrice" placeholder="请输入售价"
						lay-verify = "required" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">
					<span style="color: red;">*</span>市场价:</label>
				<div class="layui-input-inline">
					<input  type="text" id="marketPrice" name="marketPrice" placeholder="请输入市场价"
						lay-verify = "required" class="layui-input">
				</div>
			
			
			<div class="layui-form-item">
				<label class="layui-form-label">
					<span style="color: red;">*</span>是否在主页显示:</label>
				<div class="layui-input-inline">
					<select name="showHome" id="showHome">
					    <option value="0">不显示</option>
					    <option value="1">显示</option>
					    
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">
					<span style="color: red;">*</span>产品种类:</label>
				<div class="layui-input-inline">
					<select name="classId" id="classId">
					    <c:choose>
					        <c:when test="${empty ProductClass }"></c:when>
					        <c:otherwise>
					            <c:forEach items="${ProductClass }" var="u">
					            <option value="${u.id }">${u.kind }</option>
					            </c:forEach>
					        </c:otherwise>
					    </c:choose>
					    
					</select>
				</div>
			</div>
			
			
			<div class="layui-form-item">
				<div class="layui-input-block">
				<button class="layui-btn layui-btn-sm" lay-submit lay-filter="updateProduct">修改</button>
				<button type="reset" lay-submit class="layui-btn layui-btn-sm">取消</button>
				</div>
			</div>
		</form>
		
		<script>
			layui.use(['form','layer','upload'],function(){
				var form = layui.form,$ = layui.$,layer = layui.layer,upload = layui.upload;
				$("#imgFace").attr("src","../"+$("#picture").val());
				//执行实例
				  var uploadInst = upload.render({
				    elem: '#uploadProduct' //绑定元素
				    ,url: '../ProductAdminServlet?reqName=upload' //上传接口
				    ,done: function(res){
				    	 //回显图片
				    	  layer.msg(res.message,{icon:6});
				    	  $("#imgFace").attr("src","../"+res.message);
				    	  //保存名字
				    	  $("#picture").val(res.message);
				    }
				    ,error: function(){
				    }
				  });
				
				// 表单按钮在监听的时候    updateUser按钮后面的（lay-filter事件名字）
					form.on('submit(updateProduct)',function(res){
						var str = $("#updateProduct").serialize();
						$.post(
							"http://localhost:8080/Dream/ProductAdminServlet?req=ProductUpdate",
							str,
							function(res){
							   //success: true，操作成功；false,操作失败 
							   if(res.success == true){
							   	 layer.alert("更新成功");
							   	 //先得到当前iframe层的索引
								var index = parent.layer.getFrameIndex(window.name); 
								//再执行关闭 
								parent.layer.close(index);  
								//关闭父级页面的表格
								parent.layui.table.reload('table');
							   }else{
							   	layer.alert("更新失败");
							   }
							},
							"json"
						);
						return false;
						
					});
				
			})
			
		</script>
		
	</body>
</html>
